<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态添加输入框</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }
        .input-container {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <button id="addButton">添加输入框</button>
    <div id="inputArea"></div>

    <script>
        let inputCount = 0; // 计数器，用于生成唯一 ID

        document.getElementById('addButton').addEventListener('click', () => {
            inputCount++; // 增加计数器
            const inputArea = document.getElementById('inputArea');

            // 创建新的输入框
            const inputContainer = document.createElement('div');
            inputContainer.className = 'input-container';

            const input = document.createElement('input');
            input.type = 'text';
            input.id = `input${inputCount}`; // 生成唯一 ID

            const label = document.createElement('label');
            label.setAttribute('for', input.id);
            label.innerText = `输入框 ${inputCount}: `;

            // 将标签和输入框添加到容器中
            inputContainer.appendChild(label);
            inputContainer.appendChild(input);
            inputArea.appendChild(inputContainer); // 将容器添加到页面上
        });
    </script>
</body>
</html>
